<template>
	<view class="securities">
		<view class="app-background-fixed"></view>
		<view class="cell app-pages">
			<view class="cell-item" v-for="item in 10" :key="item">
				<view class="row1">
					<view class="row1-title">
						<text style="font-size: 24rpx;">￥</text>
						<text style="font-size: 28rpx;">20.00</text>
					</view>
					<view class="" style="margin-top: 10rpx;font-size: 20rpx;">满100可用</view>
				</view>
				<view class="row2">
					<view class="row2-title">仅限xx门店部分商品使用</view>
					<view class="" style="font-size: 24rpx;color: #666666;margin-top: 20rpx;">2022.6.6-2023.6.6</view>
				</view>
				<view class="row3">
					<view class="submit" @click="handleSubmit">领取</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'Securities',
		data() {
			return {}
		},
		methods: {
			handleSubmit(){
				uni.showToast({
					title: '领取成功！',
					icon: 'success'
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
.securities{
	.cell-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		box-shadow: 0px 0px 10rpx rgba(0,0,0,0.1);
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx 40rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		margin-top: 20rpx;
		.row1{
			color: #027DB4;
			.row1-title{
				margin-left: -10rpx;
				display: flex;
				align-items: flex-end;
			}
		}
		.row2{
			width: 300rpx;
			.row2-title{
				height: 80rpx;
			}
		}
		.row3{
				display: flex;
				align-items: flex-end;
				justify-content: center;
				height: 132rpx;
			.submit {
				font-size: 24rpx;
				background-color: #FFFFFF;
				border-radius: 15rpx;
				border: 2rpx solid #f74062;
				padding: 2rpx 40rpx;
				color: #f74062;
			}
		}
	}
}
</style>
